<template>
  <div class="function-mall">
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in mallList" :key="index" :title="item.title">
        <div v-if="active === 0">
          第一个
          <!-- <van-dropdown-menu active-color="#ee0a24">
            <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
            <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
          </van-dropdown-menu> -->
          <van-field label="性别" v-model="sex" is-link @focus="show=true"></van-field>
          <van-action-sheet v-model="show" :round="false" :actions="sexes" @select="onSelect"></van-action-sheet>
        </div>
        <div v-if="active === 1">
          第二个
        </div>
        <div v-if="active === 2">
          第三个
        </div>
        <div v-if="active === 3">
          第四个
        </div>
        <div v-if="active === 4">
          第五个
        </div>
        <div v-if="active === 5">
          第六个
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: 'functionMall',
  data() {
    return {
      active: 0,
      mallList: [
        {
          title: '猜你喜欢'
        },
        {
          title: '支付优惠'
        },
        {
          title: '生活必需'
        },
        {
          title: '旅游出行'
        },{
          title: '购物美食'
        },
        {
          title: '休闲娱乐'
        }
      ],
      // option1: [
      //   { text: '全部商品', value: 0 },
      //   { text: '新款商品', value: 1 },
      //   { text: '活动商品', value: 2 }
      // ],
      // option2: [
      //   { text: '默认排序', value: 'a' },
      //   { text: '好评排序', value: 'b' },
      //   { text: '销量排序', value: 'c' }
      // ],
      // value1: 0,
      // value2: 'a',
      sex: '男',
      sexes: [
        {name: '男'},
        {name: '女'}
      ],
      show: false
    }
  },
  methods: {
    onSelect(item) {
      this.show = false;
      this.sex = item.name;
    }
  }
}
</script>